<template>
    <!--banner轮播-->
    <article class="city-banner-box">
        <div class="swiper-container" id="city-banner-swiper-container" v-show="!bannerPhotoNoDataShow">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in bannerPhotoItem" :key="index">
                    <img :src="isNullImg(item.photo)" preview="item.length" preview-text="城市图片" :title="item.description" :alt="item.description">
                </div>
            </div>
            <div class="next">
                <div class="swiper-button-next iconfont icon-you"></div>
            </div>
            <div class="prev">
                <div class="swiper-button-prev iconfont icon-zuo"></div>
            </div>
        </div>
        <div class="bannerPhotoNoData">
            <img src="/static/img/houseList-noData.jpg" alt="" v-show="bannerPhotoNoDataShow">
        </div>
        <div class="content">
            <div class="container">
                <a-row type="flex" justify="center" align="middle">
                    <a-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5">
                        <nav id="hotCityList-nav">
                            <aside >
                                <h3 class="transition">{{ isNull0(getCityDetails.chineseName) }}</h3>
                                <p class="transition">{{ isNull0(getCityDetails.englishName) }}</p>
                            </aside>
                            <i class="iconfont icon-xiajiantou transition"></i>
                        </nav>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5">
                        <!-- 教育指数 -->
                        <a-progress
                            type="circle"
                            :percent="calculateEDU(getCityIndexData.educationRateLocal).progress"
                            :status="calculateEDU(getCityIndexData.educationRateLocal).color"
                            :format="percent => '教育指数'+ calculateEDU(getCityIndexData.educationRateLocal).score"
                            :width="80"/>
                        <p>高学历比例为{{ getCityIndexData.educationRateLocal }}%</p>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5">
                        <!-- 收入指数 -->
                        <a-progress
                            type="circle"
                            :percent="calculateIncome(getCityIndexData.annualHomeIncomeLocal).progress"
                            :status="calculateIncome(getCityIndexData.annualHomeIncomeLocal).color"
                            :format="percent => '收入指数'+ calculateIncome(getCityIndexData.annualHomeIncomeLocal).score"
                            :width="80"/>
                        <p>平均家庭收入{{ annualHomeIncomeLocal_text(getCityIndexData.annualHomeIncomeLocal) }}</p>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5">
                        <!-- 安全指数 -->
                        <a-progress
                            type="circle"
                            :percent="calculateSecurity(getCityIndexData.safetyIndex).progress"
                            :status="calculateSecurity(getCityIndexData.safetyIndex).color"
                            :format="percent => '安全指数'+ calculateSecurity(getCityIndexData.safetyIndex).score"
                            :width="80"/>
                        <p>社会环境{{ calculateSecurity(getCityIndexData.safetyIndex).score }}</p>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
                        <!-- 物价指数 -->
                        <a-progress
                            type="circle"
                            :percent="calculateLiveCost(getCityIndexData.liveCost).progress"
                            :status="calculateLiveCost(getCityIndexData.liveCost).color"
                            :format="percent => '物价指数'+ calculateLiveCost(getCityIndexData.liveCost).score"
                            :width="80"/>
                        <p>{{ LiveCost_text(parseInt(getCityIndexData.liveCost)) }}</p>
                    </a-col>
                </a-row>
                <transition name="fade">
                    <a-row class="clearfix" id="select-hotCity" :gutter="8" v-show="hotCityListShow">
                        <a-col :xs="24" :sm="24" :md="2" :lg="2" :xl="2">热门城市：</a-col>
                        <a-col :xs="24" :sm="24" :md="2" :lg="2" :xl="2" v-for="(item, index) in hotCityListData" :key="index">
                            <router-link :to="{path: 'City', query: {cityid: item.id }}">{{ item.chineseName }}</router-link>
                        </a-col>
                    </a-row>
                </transition>
            </div>
        </div>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                cityId: null, //城市Id
                percent: null,
                mySwiper: null, //swiper
                bannerPhotoItem: [], //banner轮播
                hotCityListData: [], //11个热门城市列表数据
                hotCityListShow: false, //11个热门城市列表数据-不可见

                bannerPhotoNoDataShow: false, //轮播图——判断是否有无数据

                color: '#4dc600'

            }
        },
        computed: {
            //从state获取城市详情数据
            getCityDetails() {
                if(this.$store.getters.get_cityDetails){
                    if(Object.keys(this.$store.getters.get_cityDetails).length != 0){
                        // 获取banner轮播城市图片
                        this.getBannerPhotoData();
                    }
                }
                return this.$store.getters.get_cityDetails
            },
            //从state获取城市指数数据
            getCityIndexData() {
                return this.$store.getters.get_cityIndexData
            },
        },
        created() {
        },
        mounted() {
            //获取11个热门城市列表
            this.getCityListData();

            //判断点击的是否是轮播图里的左侧城市导航条父元素，是的话则显示11个热门城市下拉盒子，不是的话则隐藏，给body绑定
            this.$nextTick(() => {
                window.addEventListener('click', this.hotCityListIsHidden, false);
            })
        },
        //没有缓存的路由销毁时触发
        destroyed: function() {
            window.removeEventListener('click', this.hotCityListIsHidden, false);//离开的时候注销事件
        },
        methods: {
            // 获取banner轮播城市图片
            getBannerPhotoData() {
                this.cityId = this.$store.getters.get_cityDetails.id;
                this.$get('/city/photo/'+ this.cityId).then(res => {
                    if (res.status == 0) {
                        this.bannerPhotoItem = res.data;
                        this.bannerPhotoNoDataShow = false;

                        //销毁上一次的swiper对象，并释放浏览器内存
                        if(this.mySwiper){
                            this.mySwiper.destroy();
                        }
                        //延时1s，否则会造成死循环，或者其他报错
                        this.$nextTick(() => {
                            this.mySwiper = new Swiper('#city-banner-swiper-container', {
                                loop: true,
                                centeredSlides: true,
                                slidesPerView: 2,
                                spaceBetween: 0,
                                autoplay: {
                                    delay: 5000, //自动切换的时间间隔，单位ms
                                    stopOnLastSlide: false, //如果设置为true，当切换到最后一个slide时停止自动切换
                                    disableOnInteraction: true, //用户操作swiper之后，是否禁止autoplay。默认为true,如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
                                },
                                navigation: { //前进后退按钮组件
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                },
                                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                                breakpoints: {
                                    1920: {
                                        slidesPerView: 2,
                                    },
                                    1376: {
                                        slidesPerView: 1,
                                    },
                                }
                            });
                        });

                        //全屏看图功能，图片异步获取后必须调用
                        this.$previewRefresh();
                    }else{
                        console.log(res.msg);
                        this.bannerPhotoNoDataShow = true;
                    }
                });

            },
            //获取11个热门城市列表
            getCityListData(){
                this.$get('/city/list/1/20').then(res => {
                    if (res.status == 0) {
                        this.hotCityListData = res.list;
                    }else{
                        console.log(res.msg);
                    }
                });
            },
            //计算教育指数进度条结果
            calculateEDU(data){
                let results = {};
                if (data >= 34) {
                    results = {
                        progress: 95,
                        // color: '#4dc600'
                        color: 'success',
                        score: 'A+'
                    };
                } else if(data < 34 && data >= 31) {
                    results = {
                        progress: 80,
                        // color: '#008dff'
                        color: 'active',
                        score: 'B+'
                    };
                }else if(data < 31) {
                    results = {
                        progress: 65,
                        // color: '#ff9b05'
                        color: 'exception',
                        score: 'C+'
                    };
                }
                return results;
            },
            //计算收入指数进度条结果
            calculateIncome(data){
                let results = {};
                let parseData = parseInt(data);
                if (parseData >= 70000) {
                    results = {
                        progress: 95,
                        // color: '#4dc600'
                        color: 'success',
                        score: 'A+'
                    };
                } else if(parseData < 70000 && parseData >= 60000) {
                    results = {
                        progress: 80,
                        // color: '#008dff'
                        color: 'active',
                        score: 'B+'
                    };
                }else if(parseData < 60000) {
                    results = {
                        progress: 65,
                        // color: '#ff9b05'
                        color: 'exception',
                        score: 'C+'
                    };
                }
                return results;
            },
            //平均家庭收入文字说明
            annualHomeIncomeLocal_text(data){
                 let val = null;
                 if (data == 0 || data == null || data == '') {
                     val = '-';
                 } else {
                     val = this.$accounting.formatMoney(parseInt(data / 1000), "$", 0)+'K' ;
                 }
                 return val;
             },
            //计算安全指数进度条结果：0：不安全、1：较安全、2：安全、3：非常安全
            calculateSecurity(data){
                let results = {};
                let parseData = parseInt(data);
                if (parseData == 3) {
                    results = {
                        progress: 95,
                        // color: '#4dc600'
                        color: 'success',
                        score: '非常安全'
                    };
                } else if(parseData == 2) {
                    results = {
                        progress: 80,
                        // color: '#008dff'
                        color: 'active',
                        score: '安全'
                    };
                }else if(parseData == 1) {
                    results = {
                        progress: 65,
                        // color: '#ff9b05'
                        color: 'exception',
                        score: '较安全'
                    };
                }else if(parseData == 0) {
                    results = {
                        progress: 45,
                        // color: '#ff9b05'
                        color: 'exception',
                        score: '不安全'
                    };
                }
                return results;
            },
            //计算物价指数进度条结果：全美平均值为100
            calculateLiveCost(data){
                let results = {};
                let parseData = parseInt(data);
                if (parseData <= 100) {
                    results = {
                        progress: 95,
                        // color: '#4dc600'
                        color: 'success',
                        score: 'A+'
                    };
                } else if(parseData < 104 && parseData >= 100) {
                    results = {
                        progress: 80,
                        // color: '#008dff'
                        color: 'active',
                        score: 'B+'
                    };
                }else if(parseData > 104) {
                    results = {
                        progress: 65,
                        // color: '#ff9b05'
                        color: 'exception',
                        score: 'C+'
                    };
                }
                return results;
            },
            // 物价指数文字说明
            LiveCost_text(data){
                let val = '';
                let parseData = parseInt(data);
                if (parseData > 100) {
                    val = '比全美平均值高'+ (parseData - 100) +'%';
                } else if (parseData < 100) {
                    val = '比全美平均值低'+ (100 - parseData) +'%';
                } else if (parseData == 100) {
                    val = '与全美平均值相当';
                }
                return val;
            },
            //判断点击的是否是轮播图里的左侧城市导航条父元素，是的话则显示11个热门城市下拉盒子，不是的话则隐藏，给body绑定
            hotCityListIsHidden(e){
                let dom = document.getElementById('select-hotCity');
                let nav = document.getElementById('hotCityList-nav');
                if (!dom.contains(e.target) && !nav.contains(e.target)) {
                    this.hotCityListShow = false;
                }else{
                    this.hotCityListShow = true;
                }
            },
        },
        components: {}
    }
</script>

<style lang="less" type="text/less">
    body {
        //banner轮播
        .city-banner-box {
            position: relative;
            >.swiper-container {
                overflow: hidden;
                text-align: center;
                > .swiper-wrapper {
                    > .swiper-slide {
                        > img {
                            width: 100%;
                            height: 600px;
                        }
                    }
                }
                > .next,
                > .prev{
                    width: 25%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    /*background: rgba(0, 0, 0, .75);*/
                    /*background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);*/
                    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
                    filter: alpha(opacity=50);
                    z-index: 10;
                    >div{
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        -webkit-transform: translate(-50%, -50%);
                        -moz-transform: translate(-50%, -50%);
                        -ms-transform: translate(-50%, -50%);
                    }
                    > .swiper-button-next{
                        left: 70%;
                    }
                    >.swiper-button-prev{
                        left: 30%;
                    }
                }
                > .prev {
                    left: 0;
                    right: auto;
                }
            }
            .bannerPhotoNoData{
                text-align: center;
                background: rgba(0, 0, 0, 0.75);
            }
            >.content {
                width: 100%;
                background: rgba(0, 0, 0, .5);
                position: absolute;
                top: 0;
                left: 0;
                z-index: 11;
                color: #fff;
                > .container {
                    > .ant-row-flex {
                        padding: 20px 0;
                        display: flex;
                        display: -webkit-flex;
                        align-items: center;
                        > div {
                            text-align: center;
                            > #hotCityList-nav {
                                height: 100%;
                                border-right: 1px solid #fff;
                                display: flex;
                                display: -webkit-flex;
                                align-items: center;
                                cursor: pointer;
                                > aside {
                                    > h3 {
                                        font-size: 34px;
                                        color: #fff;
                                    }
                                    > p {
                                        font-size: 18px;
                                    }
                                }
                                > i {
                                    margin: 0 0 0 40px;
                                    font-size: 25px;
                                }
                            }
                            > #hotCityList-nav:hover {
                                color: #00b8ee;
                                > aside {
                                    > h3,
                                    > p{
                                        color: #00b8ee;
                                    }
                                }

                            }
                            > p {
                                margin-top: 10px;
                            }
                        }
                    }
                    #select-hotCity {
                        background: rgba(255, 255, 255, .9);
                        padding: 20px 40px;
                        color: #000;
                        > div {
                            vertical-align: middle;
                            line-height: 34px;
                            > a {
                                display: inline-block;
                                vertical-align: middle;
                                width: 100%;
                                cursor: pointer;
                                border: 1px solid #000;
                                color: #000;
                                text-align: center;
                            }
                            > a:hover {
                                background: #1178e8;
                                color: #fff;
                                border-color: #1178e8;
                            }
                        }
                    }
                }
            }
            .ant-progress-circle .ant-progress-text{
                font-size: 14px;
                color: #fff !important;
                white-space: pre-wrap;
                line-height: 20px;
                margin: 5px 0 0 0;
                padding: 10px;
            }
        }
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity : 0;
    }
</style>
